<template>
  <div class="loading-box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<script>
export default {
  name: 'loding',
}
</script>

<style scoped>
.loading-box {
  width: 100px;
  position: relative;
}
.loading-box div {
  width: 15px;
  height: 15px;
  background-color: #fc2f70;
  border-radius: 50%;
  position: absolute;
}

.loading-box div:nth-child(1) {
  animation: loading 2s linear infinite;
}
.loading-box div:nth-child(2) {
  animation: loading 2s linear infinite -0.4s;
}
.loading-box div:nth-child(3) {
  animation: loading 2s linear infinite -0.8s;
}
.loading-box div:nth-child(4) {
  animation: loading 2s linear infinite -1.2s;
}
.loading-box div:nth-child(5) {
  animation: loading 2s linear infinite -1.6s;
}
@keyframes loading {
  0% {
    left: 100px;
    top: 0;
  }
  80% {
    left: 0;
    top: 0;
  }
  85% {
    left: 0;
    top: -20px;
    width: 15px;
    height: 15px;
  }
  90% {
    width: 40px;
    height: 15px;
  }
  95% {
    left: 100px;
    top: -20px;
    width: 15px;
    height: 15px;
  }
  100% {
    left: 100px;
    top: 0;
  }
}
</style>
